import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Person } from '../../roles.component';

@Component({
  selector: 'app-role-modal',
  templateUrl: './role-modal.component.html',
  styleUrls: ['./role-modal.component.scss']
})
export class RoleModalComponent implements OnInit {
  title: string = '新增角色'
  isVisible = false
  validateForm!: FormGroup
  isOkLoading = false
  constructor(private fb: FormBuilder) { }
  handleOpen(val?: Person) {
    if(val) {
      this.title = '编辑角色'
      this.validateForm.setValue({name: val.name, status: val.status, note: val.note})
      // this.name = val.name
    } else {
      this.title = '新增角色'
    }
    this.isVisible = true
    
  }
  handleCancel() {
    this.isVisible = false
    this.validateForm.reset()
  }
  handleSubmit() {
    console.log(this.validateForm.valid,'validateFields');

    if (this.validateForm.valid) {
      console.log('submit', this.validateForm.value);
      // this.isVisible = false
      // this.isOkLoading = false
    } else {
      Object.values(this.validateForm.controls).forEach(control => {
        if (control.invalid) {
          control.markAsDirty();
          control.updateValueAndValidity({ onlySelf: true });
        }
      });
    }
  }
  ngOnInit(): void {
    this.validateForm = this.fb.group({
      name: [null, [Validators.required]],
      status: [null],
      note: [null],
    });
  }

}
